<!--
 * @Author: your name
 * @Date: 2021-04-16 10:54:02
 * @LastEditTime: 2021-07-27 09:26:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\authorityManagement\personalDetails.vue
-->
<template>
  <page-layout class="staff-detail" :avatar="nowStaff.avatar|| 'http://tking-test.oss-cn-hangzhou.aliyuncs.com/compassCentral%2Fstaff-avatar.png'" title=" " :isBreadcrumb="isBreadcrumb">
    <div slot="headerContent">
      <div class="title">{{ nowStaff.name }}</div>
      <div>{{ nowStaff.department }}
        <span v-if="nowStaff.position">-{{ nowStaff.position }}</span>
      </div>
    </div>
    <detail type="staff" :keyId="staff.userId" :isSave="isSave" :isMember="false" :disabledChecked="disabledChecked" :defaultChecked="defaultChecked" @staff-permission="onStaffPermission"></detail>
  </page-layout>
</template>

<script>
import Detail from '../modal/Detail';
import PageLayout from '@/layouts/PageLayout';
import { employeeInfo, getConfigPermission } from '@/services/staff';
export default {
  name: 'personalDetails',
  components: { Detail, PageLayout },
  data () {
    return {
      nowStaff: {},
      isSave: false,
      isBreadcrumb: [],
      defaultChecked: [],
      disabledChecked: []
    };
  },
  props: {
    staff: Object,
  },
  watch: {
    staff: {
      handler (newValue) {
        const id = newValue.userId;
        if (!id) {
          return;
        }
        employeeInfo({ id: id }).then(res => {
          let { code, data, msg } = res.data;
          if (code == 200) {
            this.nowStaff = {
              avatar: data.avatar,
              name: data.realName,
              department: data.userDeptList[0].name,
              position: data.postName,
            };
            let userAuthorityList = [], roleAuthorityList = [];
            if (data.roleAuthorityList && data.roleAuthorityList.length) {
              roleAuthorityList = data.roleAuthorityList
            }
            if (data.userAuthorityList && data.userAuthorityList.length) {
              userAuthorityList = data.userAuthorityList
            }
            roleAuthorityList = roleAuthorityList.map(item => item.id)
            userAuthorityList = userAuthorityList.map(item => item.id)
            userAuthorityList.forEach((user, index) => {
              roleAuthorityList.forEach(role => {
                if (user == role) {
                  userAuthorityList.splice(index, 1)
                }
              })
            })
            this.disabledChecked = roleAuthorityList;
            this.defaultChecked = roleAuthorityList.concat(userAuthorityList);
          } else {
            this.$message.error(msg);
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    onStaffPermission (data) {
      this.isSave = true;
      const params = { userId: this.staff.userId, authorityIds: data.toString() }
      this.getConfigPermission(params)
    },
    /**
     * @description: 修改员工角色
     * @param {*}
     * @return {*}
     */
    getConfigPermission (params) {
      getConfigPermission(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.isSave = false;
          this.$message.success("权限修改成功");
        } else {
          this.$message.error(msg);
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
.staff-detail {
  /deep/ .page-header {
    padding: 0 24px;
  }
  /deep/ .page-content.side.fixed {
    padding: 0;
  }
}
</style>
